<template>
  <div class="rank-list">
    <!-- 排序选择器 -->
    <div class="sort-selector">
      <van-dropdown-menu>
        <van-dropdown-item 
          v-model="selectedSort" 
          :options="sortOptions" 
          @change="handleSortChange"
        />
      </van-dropdown-menu>
    </div>
    
    <div v-for="(item, index) in rankList" :key="item.gameId" class="rank-item"  @click="goDetail(item.gameId)">
      <span class="rank-number">{{ index + 1 }}</span>
      <!-- 左侧大图 -->
      <div class="game-image-wrapper">
        <img :src="item.coverImage" alt="" class="game-image" />
      </div>
      <!-- 右侧文字信息 -->
      <div class="game-info">
        <p class="title">{{ item.gameName }}</p>
        <!-- 根据排序类型显示不同信息 -->
        <p class="tag">
          {{ getDisplayInfo(item, selectedSort.value) }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from '@/utils/axios.ts'
import { DropdownItemOption } from 'vant'
import router from "@/router/router.ts";

// 定义游戏数据接口
interface Game {
  gameId: number
  gameName: string
  coverImage: string
  platform?: string
  type?: string
  score?: number
  releaseTime?: string // 上线时间
  updateTime?: string // 更新时间
}

const rankList = ref<Game[]>([])
const selectedSort = ref('score') // 默认按评分排序

const goDetail = (gameId: number) => {
  if (!gameId) {
    console.warn('游戏ID无效，跳转取消')
    return
  }
  router.push({ name: 'goGameDetail', params: { id: gameId } })
}

// 排序选项
const sortOptions: DropdownItemOption[] = [
  { text: '评分排序', value: 'score' },
  { text: '上线时间', value: 'releaseTime' },
  { text: '更新时间', value: 'updateTime' }
]

// 获取榜单数据
const fetchRank = () => {
  axios.get(`/api/games/rank?type=${selectedSort.value}`)
      .then(res => {
        const records = res.data.records || []
        rankList.value = records.map((item: any) => ({
          gameId: item.gameId,
          gameName: item.gameName,
          coverImage: item.coverImage,
          platform: item.platform,
          type: item.type,
          score: item.score,
          releaseTime: item.releaseTime,
          updateTime: item.updateTime
        }))
      })
      .catch(err => console.error('榜单加载失败:', err))
}

// 处理排序变化
const handleSortChange = (value: string) => {
  selectedSort.value = value
  fetchRank()
}

// 根据排序类型获取显示信息
const getDisplayInfo = (item: Game, sortType: string): string => {
  switch (sortType) {
    case 'score':
      return `评分：${item.score || '暂无'}`
    case 'releaseTime':
      return `上线时间：${item.releaseTime || '未知'}`
    case 'updateTime':
      return `更新时间：${item.updateTime || '未知'}`
    default:
      return `评分：${item.score || '暂无'}`
  }
}

onMounted(() => {
  fetchRank()
})
</script>

<style scoped>
.sort-selector {
  padding: 8px 0;
  background: white;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.rank-number {
  width: 20px;
  font-weight: bold;
  margin-right: 8px;
  color: #ff9900;
}

.game-image-wrapper {
  width: 80px;
  height: 80px;
  margin-right: 12px;
  overflow: hidden;
  border-radius: 8px;
}

.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-info {
  flex: 1;
  padding: 4px 0;
}

.title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.tag {
  font-size: 12px;
  color: #996;
}
</style>